import _mergeJSXProps2 from "@vue/babel-helper-vue-jsx-merge-props";
import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
import _extends from "@babel/runtime/helpers/esm/extends";
import Icon from '../icon';
import Cell from '../cell';
import {cellProps} from '../cell/shared';
import {preventDefault} from '../utils/dom/event';
import {resetScroll} from '../utils/dom/reset-scroll';
import {isIOS} from '../utils/validate/system';
import {formatNumber} from './utils';
import {addUnit, createNamespace, isDef, isObj} from '../utils';

var _createNamespace = createNamespace('field'),
    createComponent = _createNamespace[0],
    bem = _createNamespace[1];

export default createComponent({
    inheritAttrs: false,
    props: _extends({}, cellProps, {
        error: Boolean,
        readonly: Boolean,
        autosize: [Boolean, Object],
        leftIcon: String,
        rightIcon: String,
        clearable: Boolean,
        formatter: Function,
        maxlength: [Number, String],
        labelWidth: [Number, String],
        labelClass: null,
        labelAlign: String,
        inputAlign: String,
        errorMessage: String,
        errorMessageAlign: String,
        showWordLimit: Boolean,
        type: {
            type: String,
            default: 'text'
        }
    }),
    data: function data() {
        return {
            focused: false
        };
    },
    watch: {
        value: function value() {
            this.$nextTick(this.adjustSize);
        }
    },
    mounted: function mounted() {
        this.format();
        this.$nextTick(this.adjustSize);
    },
    computed: {
        showClear: function showClear() {
            return this.clearable && this.focused && this.value !== '' && isDef(this.value) && !this.readonly;
        },
        listeners: function listeners() {
            var listeners = _extends({}, this.$listeners, {
                input: this.onInput,
                keypress: this.onKeypress,
                focus: this.onFocus,
                blur: this.onBlur
            });

            delete listeners.click;
            return listeners;
        },
        labelStyle: function labelStyle() {
            var labelWidth = this.labelWidth;

            if (labelWidth) {
                return {
                    width: addUnit(labelWidth)
                };
            }
        }
    },
    methods: {
        // @exposed-api
        focus: function focus() {
            if (this.$refs.input) {
                this.$refs.input.focus();
            }
        },
        // @exposed-api
        blur: function blur() {
            if (this.$refs.input) {
                this.$refs.input.blur();
            }
        },
        format: function format(target) {
            if (target === void 0) {
                target = this.$refs.input;
            }

            if (!target) {
                return;
            }

            var _target = target,
                value = _target.value;
            var maxlength = this.maxlength; // native maxlength not work when type is number

            if (isDef(maxlength) && value.length > maxlength) {
                value = value.slice(0, maxlength);
                target.value = value;
            }

            if (this.type === 'number' || this.type === 'digit') {
                var originValue = value;
                var allowDot = this.type === 'number';
                value = formatNumber(value, allowDot);

                if (value !== originValue) {
                    target.value = value;
                }
            }

            if (this.formatter) {
                var _originValue = value;
                value = this.formatter(value);

                if (value !== _originValue) {
                    target.value = value;
                }
            }

            return value;
        },
        onInput: function onInput(event) {
            // not update v-model when composing
            if (event.target.composing) {
                return;
            }

            this.$emit('input', this.format(event.target));
        },
        onFocus: function onFocus(event) {
            this.focused = true;
            this.$emit('focus', event); // hack for safari

            /* istanbul ignore if */

            if (this.readonly) {
                this.blur();
            }
        },
        onBlur: function onBlur(event) {
            this.focused = false;
            this.$emit('blur', event);
            resetScroll();
        },
        onClick: function onClick(event) {
            this.$emit('click', event);
        },
        onClickLeftIcon: function onClickLeftIcon(event) {
            this.$emit('click-left-icon', event);
        },
        onClickRightIcon: function onClickRightIcon(event) {
            this.$emit('click-right-icon', event);
        },
        onClear: function onClear(event) {
            preventDefault(event);
            this.$emit('input', '');
            this.$emit('clear', event);
        },
        onKeypress: function onKeypress(event) {
            // trigger blur after click keyboard search button

            /* istanbul ignore next */
            if (this.type === 'search' && event.keyCode === 13) {
                this.blur();
            }

            this.$emit('keypress', event);
        },
        adjustSize: function adjustSize() {
            var input = this.$refs.input;

            if (!(this.type === 'textarea' && this.autosize) || !input) {
                return;
            }

            input.style.height = 'auto';
            var height = input.scrollHeight;

            if (isObj(this.autosize)) {
                var _this$autosize = this.autosize,
                    maxHeight = _this$autosize.maxHeight,
                    minHeight = _this$autosize.minHeight;

                if (maxHeight) {
                    height = Math.min(height, maxHeight);
                }

                if (minHeight) {
                    height = Math.max(height, minHeight);
                }
            }

            if (height) {
                input.style.height = height + 'px';
            }
        },
        genInput: function genInput() {
            var h = this.$createElement;
            var type = this.type;
            var inputSlot = this.slots('input');

            if (inputSlot) {
                return h("div", {
                    "class": bem('control', this.inputAlign)
                }, [inputSlot]);
            }

            var inputProps = {
                ref: 'input',
                class: bem('control', this.inputAlign),
                domProps: {
                    value: this.value
                },
                attrs: _extends({}, this.$attrs, {
                    readonly: this.readonly
                }),
                on: this.listeners,
                // add model directive to skip IME composition
                directives: [{
                    name: 'model',
                    value: this.value
                }]
            };

            if (type === 'textarea') {
                return h("textarea", _mergeJSXProps([{}, inputProps]));
            }

            var inputType = type; // type="number" is weired in iOS

            if (type === 'number') {
                inputType = 'text';
            }

            if (type === 'digit') {
                // set pattern to show number keyboard in iOS
                if (isIOS()) {
                    inputType = 'number';
                    inputProps.attrs.pattern = '\\d*'; // cannot prevent dot when type is number in Android, so use tel
                } else {
                    inputType = 'tel';
                }
            }

            return h("input", _mergeJSXProps2([{
                "attrs": {
                    "type": inputType
                }
            }, inputProps]));
        },
        genLeftIcon: function genLeftIcon() {
            var h = this.$createElement;
            var showLeftIcon = this.slots('left-icon') || this.leftIcon;

            if (showLeftIcon) {
                return h("div", {
                    "class": bem('left-icon'),
                    "on": {
                        "click": this.onClickLeftIcon
                    }
                }, [this.slots('left-icon') || h(Icon, {
                    "attrs": {
                        "name": this.leftIcon
                    }
                })]);
            }
        },
        genRightIcon: function genRightIcon() {
            var h = this.$createElement;
            var slots = this.slots;
            var showRightIcon = slots('right-icon') || this.rightIcon;

            if (showRightIcon) {
                return h("div", {
                    "class": bem('right-icon'),
                    "on": {
                        "click": this.onClickRightIcon
                    }
                }, [slots('right-icon') || h(Icon, {
                    "attrs": {
                        "name": this.rightIcon
                    }
                })]);
            }
        },
        genWordLimit: function genWordLimit() {
            var h = this.$createElement;

            if (this.showWordLimit && this.maxlength) {
                return h("div", {
                    "class": bem('word-limit')
                }, [this.value.length, "/", this.maxlength]);
            }
        }
    },
    render: function render() {
        var _bem;

        var h = arguments[0];
        var slots = this.slots,
            labelAlign = this.labelAlign;
        var scopedSlots = {
            icon: this.genLeftIcon
        };

        if (slots('label')) {
            scopedSlots.title = function () {
                return slots('label');
            };
        }

        return h(Cell, {
            "attrs": {
                "icon": this.leftIcon,
                "size": this.size,
                "title": this.label,
                "center": this.center,
                "border": this.border,
                "isLink": this.isLink,
                "required": this.required,
                "clickable": this.clickable,
                "titleStyle": this.labelStyle,
                "titleClass": [bem('label', labelAlign), this.labelClass],
                "arrowDirection": this.arrowDirection
            },
            "class": bem((_bem = {
                error: this.error
            }, _bem["label-" + labelAlign] = labelAlign, _bem['min-height'] = this.type === 'textarea' && !this.autosize, _bem)),
            "scopedSlots": scopedSlots,
            "on": {
                "click": this.onClick
            }
        }, [h("div", {
            "class": bem('body')
        }, [this.genInput(), this.showClear && h(Icon, {
            "attrs": {
                "name": "clear"
            },
            "class": bem('clear'),
            "on": {
                "touchstart": this.onClear
            }
        }), this.genRightIcon(), slots('button') && h("div", {
            "class": bem('button')
        }, [slots('button')])]), this.genWordLimit(), this.errorMessage && h("div", {
            "class": bem('error-message', this.errorMessageAlign)
        }, [this.errorMessage])]);
    }
});